<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // 组件标签包裹的内容可以通过props.children来获取。如果包裹了多个虚拟DOM元素，那么其值的类型为数组，如果只有一个，即不是数组。
    const App = ()=>{
        return (
            <div>
                <h3>App</h3>
                <Child a={100}>
                    <p>1</p>
                    <p>2</p>
                </Child>
            </div>
        )
    }
    const Child = (props)=>{
        console.log(props)
        return (
            <div>
                <h3>Child</h3>
                {props.children}
            </div>
        )
    }
    root.render(<App/>)
</script>
</html>